<!-- 配置界面右侧的工具栏 -->
<template>
    <div style="position: relative !important;height: 100%;">
        <div v-if="module.type >= 1 && module.type <= 7">
            <el-form :model="module" block style="text-align: left;">
                <el-form-item label="组件样式:" autofocus class="input0">
                    <el-select v-model="module.type" @change="changeComponent(module.type)" placeholder="请选择样式"
                        class="inpu" style="width: 4.2rem !important;">
                        <el-option v-for="item in allComponent" :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="块级标题:" autofocus>
                    <el-input v-model="module.content_title" class="inpu" @input="changeTitle(module)"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="module.type == 0">
            <el-form :model="module" block style="text-align: left;">
                <!-- 大屏标题部分配置 -->
                <h4> 标题配置</h4>
                <el-form-item label="大屏标题:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-input v-model="module.title_name" class="inpu" @input="changeType(0)"></el-input>
                </el-form-item>
                <el-form-item label="字体颜色:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-color-picker v-model="module.title_color" @change="changeType(0)" show-alpha>
                    </el-color-picker>
                </el-form-item>
                <el-form-item label="字体大小:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-input-number controls-position="right" size="small" v-model="module.title_size"
                        @change="changeType(0)" :min="0.2" :max="2" :step="0.1" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="字体间距:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-input-number controls-position="right" size="small" v-model="module.title_spacing"
                        @change="changeType(0)" :min="0.02" :max="0.2" :step="0.01" label="描述文字"></el-input-number>
                </el-form-item>
                <!-- 添加默认的尺寸大小 -->
                <el-form-item label="上传图片:" label-width="72px" class="input0" style="margin-top: 5px;width: 100%;">
                    <div class="newimg">
                        <img v-if="module.title_img" id="old" :src="module.title_img" class="thumb" />
                        <!-- <img v-else id="old" src="../../static/noimg.png" class="thumb" /> -->
                        <input type="file" style="color: aqua !important;z-index: 9999 !important;" accept="image/*"
                            id="editid" @change="editUpload" />
                        <div class="tip" style="display: block;margin-top:0.2rem;">点击上图可上传（或更换）图片</div>
                    </div>
                </el-form-item>
                <!-- 每一个块级 -->
                <h4> 整体通用配置</h4>
                <el-form-item label="边框样式:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-select v-model="module.border_style" @change="changeType(0)" placeholder="请选择边框样式" class="inpu">
                        <el-option v-for="item in border_style" :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- {{ module.border_style }} -->
                <el-form-item label="循环周期:" v-if="module.border_style == 'DvBorderBox8'" autofocus class="input0"
                    :label-width=fromLabelWidth1>
                    <el-input-number controls-position="right" size="small" v-model="module.dur" @change="changeType(0)"
                        :min="0" :max="50" :step="5"></el-input-number>
                </el-form-item>
                <el-form-item label="块级圆角:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-input-number controls-position="right" size="small" v-model="module.border_radius"
                        @change="changeType(0)" :min="0" :max="30" :step="5"></el-input-number>
                </el-form-item>
                <el-form-item label="背景颜色:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-color-picker v-model="module.back_color" @change="changeType(0)" show-alpha>
                    </el-color-picker>
                </el-form-item>
                <el-form-item label="标题颜色:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-color-picker v-model="module.small_title_color" @change="changeType(0)" show-alpha>
                    </el-color-picker>
                </el-form-item>
                <!-- 下面小标题主题的设置 -->
                <el-form-item label="字体大小:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-input-number controls-position="right" size="small" v-model="module.small_title_size"
                        @change="changeType(0)" :min="0.2" :max="1" :step="0.05" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="字体间距:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-input-number controls-position="right" size="small" v-model="module.small_title_spacing"
                        @change="changeType(0)" :min="0.02" :max="0.2" :step="0.01" label="描述文字"></el-input-number>
                </el-form-item>
                <!-- 前面小图案的样式 -->
                <el-form-item label="标签颜色:" autofocus class="input0" :label-width=fromLabelWidth1>
                    <el-color-picker v-model="module.in_color" @change="changeType(0)" show-alpha>
                    </el-color-picker>
                </el-form-item>

            </el-form>
        </div>
        <div v-else-if="module.type == 1">
            <el-tabs v-model="config1_1" @tab-click="handleClick1_1" stretch class="tabs">
                <el-tab-pane label="属性配置" name="first">
                    <!-- 1.样式属性 -->
                    <el-form :model="module" block style="text-align: left;">
                        <!-- (1)饼图的标题配置 -->
                        <el-form-item label="饼图标题:" autofocus class="input0">
                            <el-input v-model="module.pie.title" class="inpu" @input="changeType(1)"></el-input>
                        </el-form-item>
                        <!-- (2)饼图的位置 -->
                        <el-form-item label="饼图位置:" autofocus class="input0">
                            <el-input v-model="module.pie.dynamicCenter[0]" class="inpu1"
                                @input="changeType(1)"></el-input>
                            <el-input v-model="module.pie.dynamicCenter[1]" class="inpu1"
                                @input="changeType(1)"></el-input>
                        </el-form-item>
                        <!-- (3)饼图的内外半径 -->
                        <el-form-item label="饼图半径:" autofocus class="input0">
                            <el-input v-model="module.pie.radius[0]" class="inpu1" @input="changeType(1)"></el-input>
                            <el-input v-model="module.pie.radius[1]" class="inpu1" @input="changeType(1)"></el-input>
                        </el-form-item>
                        <!-- (4) 南丁格尔图 -->
                        <el-form-item label="组件样式:" autofocus class="input0">
                            <el-select v-model="module.pie.roseType" @change="changeType(1)" placeholder="请选择样式"
                                class="inpu" style="width: 4.2rem !important;">
                                <el-option v-for="item in pie.roseType" :key='item.value' :value="item.value"
                                    :label="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <!-- 属性配置下面的 两个分配置    图例配置    环图配置-->
                    <el-tabs v-model="config1_2" style="width:100%;" @tab-click="handleClick1_2" stretch class="tabs">
                        <!-- 1-1 图例的配置 -->
                        <el-tab-pane label="图例配置" name="first">
                            <div style="text-align: left; font-size: .38rem;">
                                <el-form :model="module" block style="text-align: left;">
                                    <el-form-item label="图例显示:" autofocus class="input0">
                                        <!-- <el-input v-model="module.pie.title" class="inpu"
                                            @input="changeType(1)"></el-input> -->
                                        <el-switch v-model="module.pie.legend" @change="changeType(1)"
                                            active-color="#13ce66" inactive-color="">
                                        </el-switch>
                                    </el-form-item>

                                    <el-form-item label="图例位置:" autofocus class="input0">
                                        <el-input v-model="module.pie.legend_top" class="inpu1"
                                            @input="changeType(1)"></el-input>
                                        <el-input v-model="module.pie.legend_left" class="inpu1"
                                            @input="changeType(1)"></el-input>
                                    </el-form-item>
                                    <el-form-item label="图例颜色:" autofocus class="input0">
                                        <el-color-picker v-model="module.pie.legend_color" @change="changeType(1)"
                                            show-alpha>
                                        </el-color-picker>
                                    </el-form-item>
                                    <el-form-item label="图例布局:" autofocus class="input0">
                                        <el-select v-model="module.pie.direction" @change="changeType(1)"
                                            placeholder="请选择样式" class="inpu">
                                            <el-option v-for="item in pie.direction" :key='item.value'
                                                :value="item.value" :label="item.name">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>

                                <!-- 图例<br>
                                <el-switch v-model="module.pie.legend" @change="changeType(1)" active-color="#13ce66"
                                    inactive-color="">
                                </el-switch><br> 
                                位置<br>
                                <el-input v-model="module.pie.legend_top" class="inpu1"
                                    @input="changeType(1)"></el-input>
                                <el-input v-model="module.pie.legend_left" class="inpu1"
                                    @input="changeType(1)"></el-input><br>
                                图例颜色<br> <el-color-picker v-model="module.pie.legend_color" @change="changeType(1)"
                                    show-alpha>
                                </el-color-picker><br>
                                布局<br>
                                <el-select v-model="module.pie.direction" @change="changeType(1)" placeholder="请选择样式"
                                    class="inpu">
                                    <el-option v-for="item in pie.direction" :key='item.value' :value="item.value"
                                        :label="item.name">
                                    </el-option>
                                </el-select>-->
                            </div>
                        </el-tab-pane>
                        <!-- 1-2 环图的配置 -->
                        <el-tab-pane label="环图配置" name="second">
                            <!-- 动态配置环图的颜色 -->
                            <div style="margin-bottom: 20px;">
                                <el-button size="small" @click="addTab1(editableTabsValue)">
                                    +饼图
                                </el-button>
                            </div>
                            <el-tabs class="cycle_graph" v-model="editableTabsValue" type="card" closable
                                @tab-remove="removeTab1">
                                <el-tab-pane v-for="(item, index) in module.pie.data" :key="item.index"
                                    :label="item.name" :name="item.name">
                                    <el-form :model="item" block style="text-align: left;">
                                        <!-- (1)饼图的标题 -->
                                        <!-- 扇区标题:<input type="text" v-model="item.name" @change="changeType(1)"> -->
                                        <el-form-item label="扇区标题:" autofocus class="input0">
                                            <el-input v-model="item.name" class="inpu" @input="changeType(1)">
                                            </el-input>
                                        </el-form-item>

                                        <el-form-item label="扇区颜色:" autofocus class="input0">
                                            <el-color-picker v-model="item.itemStyle.color" @change="changeType(1)"
                                                show-alpha>
                                            </el-color-picker>
                                        </el-form-item>
                                    </el-form>
                                    <!-- {{ item.itemStyle.color }} -->
                                </el-tab-pane>
                            </el-tabs>


                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="数据配置" name="second">
                    <!-- 1. 饼图的数据内容 -->
                    <el-form :model="module" block style="text-align: left;">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.pie.data_type" class="inpu" @change="changeDataType()"
                                placeholder="请选择">
                                <el-option v-for="item in dataType" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <!-- 1.静态资源 , 自己编写数据 -->
                    <el-form style="text-align: left;margin-top:0.2rem;line-height:0.25rem;height:100%;"
                        v-if="module.pie.data_type == 1">
                        <el-form-item style="width:100%; margin-bottom:0;">
                            <h3 class="dialTitle" style="display:inline-block;margin-right:0.2rem;">
                                饼图数据
                            </h3>
                            <el-button @click="addPieData()" type="primary" plain size="mini">添加数据</el-button>

                        </el-form-item>
                        <div class="cycleBox1">
                            <div class="sensorHead">
                                <span class="inpu_b">名称</span>
                                <span class="inpu_b">数值</span>
                                <span class="inpu_b">颜色</span>
                            </div>
                            <el-form-item v-for="(domain, index) in module.pie.data" class="oneDomain"
                                style="width:100%;" :key="index + 't'">

                                <el-input class="inpu_z" v-model="domain.name" @input="changeType(1)"
                                    placeholder="输入名称"></el-input>
                                <el-input class="inpu_z" v-model="domain.value" @input="changeType(1)"
                                    placeholder="输入数值"></el-input>
                                <el-color-picker class="inpu_z" v-model="domain.itemStyle.color" @change="changeType(1)"
                                    show-alpha>
                                </el-color-picker>
                                <el-button @click.prevent="removePieData(domain)" type="danger" size="mini" plain
                                    v-if="module.pie.data.length > 1">删除</el-button>

                            </el-form-item>
                        </div>
                    </el-form>
                    <!-- 2.动态数据 选择数据来源 -->
                    <el-form :model="module" block style="text-align: left;" v-if="module.pie.data_type == 2">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.data_source.group_id" @change="changeDataConfig(config = 1)"
                                placeholder="请选择数据来源" class="inpu" style="width: 4.2rem !important;">
                                <el-option v-for="item in module.data_config" :key='item.id' :value="item.id"
                                    :label="item.data_source_name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <div style="display: flex; height: 1rem; border: 1px solid red;"
                            v-for="item in this.module.back_dictionary ">
                            <div
                                style="width: 35%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap; ">
                                {{ item.key }}</div>
                            <div
                                style="width: 35%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;   text-overflow: ellipsis;  white-space: nowrap;  ">
                                {{ item.name }}</div>
                            <div
                                style="width: 30%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  ">
                                {{ item.value }} </div>
                        </div> -->
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-else-if="module.type == 2">
            <el-tabs v-model="config2_1" @tab-click="handleClick2_1" stretch class="tabs">
                <el-tab-pane label="属性配置" name="first">
                    <el-form :model="module" block style="text-align: left;" inline>
                        <!-- (1)柱图的位置 -->
                        <el-form-item label="上边距:" autofocus class="input0">
                            <el-input v-model="module.columnar.grid_top" class="inpu1"
                                @input="changeType(2)"></el-input>
                        </el-form-item>
                        <el-form-item label="下边距:" autofocus class="input0">
                            <el-input v-model="module.columnar.grid_bottom" class="inpu1"
                                @input="changeType(2)"></el-input>
                        </el-form-item>
                        <el-form-item label="左边距:" autofocus class="input0">
                            <el-input v-model="module.columnar.grid_left" class="inpu1"
                                @input="changeType(2)"></el-input>
                        </el-form-item>
                        <el-form-item label="右边距:" autofocus class="input0">
                            <el-input v-model="module.columnar.grid_right" class="inpu1"
                                @input="changeType(2)"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form :model="module" block style="text-align: left;">

                        <el-form-item label="横坐标颜色:" autofocus class="input0">
                            <el-color-picker v-model="module.columnar.axis_color" @change="changeType(2)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                        <el-form-item label="纵坐标颜色:" autofocus class="input0">
                            <el-color-picker v-model="module.columnar.yaxis_color" @change="changeType(2)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                        <!-- <el-form-item label="柱体颜色:" autofocus class="input0">
                            <el-color-picker v-model="module.columnar.dataY[0].itemStyle.normal.color"
                                @change="changeType(2)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                        <el-form-item label="柱体宽度:" autofocus class="input0">
                            <el-input v-model="module.columnar.dataY[0].barWidth" class="inpu1"
                                @input="changeType(2)"></el-input>
                        </el-form-item> -->
                    </el-form>
                    <!-- 下面的分项 -->
                    <!-- 动态配置环图的颜色 -->
                    <div style="margin-bottom: 20px;">
                        <el-button size="small" @click="addTab2(editableTabsValue)">
                            +柱图
                        </el-button>
                    </div>
                    <el-tabs class="cycle_graph" v-model="editableTabsValue" type="card" closable
                        @tab-remove="removeTab2">
                        <el-tab-pane v-for="(item, index) in module.columnar.dataY " :key="item.index"
                            :label="item.name" :name="item.name">
                            <el-form :model="item" block style="text-align: left;">
                                <!-- (1)饼图的标题 -->
                                <!-- 扇区标题:<input type="text" v-model="item.name" @change="changeType(1)"> -->

                                <!-- 绑定的值  -->
                                <el-form-item label="柱图宽度:" autofocus class="input0">
                                    <el-input v-model="item.barWidth" class="inpu1" @input="changeType(2)">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="上下圆角:" autofocus class="input0">
                                    <el-input v-model="item.itemStyle.normal.barBorderRadius[0]" class="inpu1"
                                        @input="changeType(2)">
                                        <template slot="append" style="font-size: 12px;">左上</template>
                                    </el-input>
                                    <el-input v-model="item.itemStyle.normal.barBorderRadius[1]" class="inpu1"
                                        @input="changeType(2)">
                                        <template slot="append" style="font-size: 12px;">右上</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="柱体颜色:" autofocus class="input0">
                                    <el-color-picker v-model="item.itemStyle.normal.color" @change="changeType(2)"
                                        show-alpha>
                                    </el-color-picker>
                                </el-form-item>
                            </el-form>
                            <!-- {{ item.itemStyle.color }} -->
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="数据配置" name="second">
                    <!-- 2.柱图数据内容 -->
                    <el-form :model="module" block style="text-align: left;">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.columnar.data_type" class="inpu" @change="changeDataType()"
                                placeholder="请选择">
                                <el-option v-for="item in dataType" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <!-- 1. 柱图 静态的资源 -->
                    <el-form style="text-align: left;margin-top:0.2rem;line-height:0.25rem;height:100%;"
                        v-if="module.columnar.data_type == 1">
                        <el-form-item style="width:100%;">
                            <h3 class="dialTitle" style="display:inline-block;margin-right:0.2rem;">
                                柱图数据
                            </h3>
                            <el-button @click="addColumnarData()" type="primary" plain size="mini">添加数据</el-button>

                        </el-form-item>
                        <div class="cycleBox1">
                            <div class="sensorHead">
                                <span class="inpu_b">名称</span>
                                <!-- <span class="inpu_b">数值</span> -->
                                <span class="inpu_b" v-for="(num, index) in module.columnar.dataX" :key="index">
                                    {{ num }}的值</span>
                                <span class="inpu_b">颜色</span>
                            </div>
                            <el-form-item v-for="(domain, index) in module.columnar.dataY" class="oneDomain"
                                style="width:100%;" :key="index + 't'">
                                <el-input class="inpu_z" v-model="domain.name" @input="changeType(2)"
                                    placeholder="输入名称"></el-input>
                                <el-input class="inpu_z" v-model="domain.data[index]" @input="changeType(2)"
                                    v-for="(num, index) in domain.data" :key="index" placeholder="输入数值"></el-input>
                                <el-color-picker class="inpu_z" v-model="domain.itemStyle.normal.color"
                                    @change="changeType(2)" show-alpha>
                                </el-color-picker>
                                <el-button @click.prevent="removeColumnarData(domain)" type="danger" size="mini" plain
                                    v-if="module.columnar.dataY.length > 1">删除</el-button>

                            </el-form-item>
                        </div>
                    </el-form>
                    <!-- 2. 动态的资源 选择数据来源 -->
                    <el-form :model="module" block style="text-align: left;" v-if="module.columnar.data_type == 2">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.data_source.group_id" @change="changeDataConfig(config = 2)"
                                placeholder="请选择数据来源" class="inpu" style="width: 4.2rem !important;">
                                <el-option v-for=" item in module.data_config " :key='item.id' :value="item.id"
                                    :label="item.data_source_name">
                                </el-option>
                            </el-select>
                            <!-- {{ module.data_source.group_id - 1 }} -->
                            <!-- {{ module.data_config[module.data_source.group_id - 1].response_dictionary }} -->
                            <!-- <el-input v-model="module.pie.title" class="inpu" @input="changeType(1)"></el-input> -->
                        </el-form-item>
                        <!-- <div style="display: flex; height: 1rem; border: 1px solid red;"
                            v-for=" item  in  this.module.back_dictionary  ">
                            <div
                                style="width: 35%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap; ">
                                {{ item.key }}</div>
                            <div
                                style="width: 35%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;   text-overflow: ellipsis;  white-space: nowrap;  ">
                                {{ item.name }}</div>
                            <div
                                style="width: 30%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  ">
                                {{ item.value }} </div>
                        </div> -->
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-else-if="module.type == 3">
            <el-tabs v-model="config3_1" @tab-click="handleClick3_1" stretch class="tabs">
                <el-tab-pane label="属性配置" name="first">
                    <el-form :model="module" block style="text-align: left;" inline>
                        <!-- (1)折线的位置 -->
                        <el-form-item label="上边距:" autofocus class="input0">
                            <el-input v-model="module.fold_line.grid_top" class="inpu1"
                                @input="changeType(3)"></el-input>
                        </el-form-item>
                        <el-form-item label="下边距:" autofocus class="input0">
                            <el-input v-model="module.fold_line.grid_bottom" class="inpu1"
                                @input="changeType(3)"></el-input>
                        </el-form-item>
                        <el-form-item label="左边距:" autofocus class="input0">
                            <el-input v-model="module.fold_line.grid_left" class="inpu1"
                                @input="changeType(3)"></el-input>
                        </el-form-item>
                        <el-form-item label="右边距:" autofocus class="input0">
                            <el-input v-model="module.fold_line.grid_right" class="inpu1"
                                @input="changeType(3)"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form :model="module" block style="text-align: left;">
                        <el-form-item label="线体颜色:" autofocus class="input0">
                            <el-color-picker v-model="module.fold_line.series_color" @change="changeType(3)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                        <el-form-item label="横坐标颜色:" autofocus class="input0">
                            <el-color-picker v-model="module.fold_line.axis_color" @change="changeType(3)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                        <el-form-item label="纵坐标颜色:" autofocus class="input0">
                            <el-color-picker v-model="module.fold_line.yaxis_color" @change="changeType(3)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                    </el-form>

                    <!-- 下面的分项 -->
                    <!-- 动态配置环图的颜色 -->
                    <div style="margin-bottom: 20px;">
                        <el-button size="small" @click="addTab3(editableTabsValue)">
                            +折线
                        </el-button>
                    </div>
                    <el-tabs class="cycle_graph" v-model="editableTabsValue" type="card" closable
                        @tab-remove="removeTab3">
                        <el-tab-pane v-for="(domain, index) in module.fold_line.style_group" :key="index"
                            :label="domain.name" :name="domain.name">

                            <el-form :model="domain" block style="text-align: left;" inline>
                                <el-form-item label="线体与样式:" autofocus class="input0">
                                    <el-select v-model="domain.step" @change="changeType(3)" placeholder="请选择样式"
                                        class="inpu1">
                                        <el-option v-for="item in fold_line.line_style" :key='item.value'
                                            :value="item.value" :label="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="折线的样式:" autofocus class="input0">
                                    <el-select v-model="domain.fold_line.line_shape" @change="changeType(3)"
                                        placeholder="请选择样式" class="inpu1">
                                        <el-option v-for=" item  in  fold_line.line_shape " :key='item.value'
                                            :value="item.value" :label="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item> -->

                                <el-form-item label="线体的形式:" autofocus class="input0">
                                    <el-select v-model="domain.lineStyle.type" @change="changeType(3)"
                                        placeholder="请选择样式" class="inpu1">
                                        <el-option v-for=" item in fold_line.line_format " :key='item.value'
                                            :value="item.value" :label="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>

                </el-tab-pane>

                <!-- 3. 折线图  右边 的数据内容 -->
                <el-tab-pane label="数据配置" name="second">
                    <!-- 3. 折线的数据内容 -->
                    <el-form :model="module" block style="text-align: left;">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.fold_line.data_type" class="inpu" @change="changeDataType()"
                                placeholder="请选择">
                                <el-option v-for="item in dataType" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <!-- 3.1.静态资源 , 自己编写数据 -->
                    <el-form style="text-align: left;margin-top:0.2rem;line-height:0.25rem;height:100%;"
                        v-if="module.fold_line.data_type == 1">
                        <el-form-item label="" style="width:100%;">
                            <h3 class="dialTitle" style="display:inline-block;margin-right:0.2rem;">
                                折线数据
                            </h3>
                            <el-button @click="addFoldlineData()" type="primary" plain size="mini">添加数据</el-button>

                        </el-form-item>
                        <div class="cycleBox1">
                            <div class="sensorHead">
                                <span class="inpu_b">名称</span>
                                <span class="inpu_b">数值</span>
                                <span class="inpu_b">颜色</span>
                                <span class="inpu_b">线体宽度</span>
                                <span class="inpu_b">平滑程度</span>
                                <span class="inpu_b">点位符号</span>
                                <span class="inpu_b">折线样式</span>
                                <span class="inpu_b">线体形式</span>
                            </div>
                            <el-form-item v-for="(domain, index) in module.fold_line.style_group" class="oneDomain"
                                style="width:100%;" :key="index + 't'">

                                <el-input class="inpu_z" v-model="domain.name" @input="changeType(3)"
                                    placeholder="输入名称"></el-input>
                                <el-input class="inpu_z" v-model="domain.data[0]" @input="changeType(3)"
                                    placeholder="输入数值"></el-input>

                                <el-color-picker class="inpu_z" v-model="domain.lineStyle.color" @change="changeType(3)"
                                    show-alpha>
                                </el-color-picker>
                                <el-input class="inpu_z" v-model="domain.lineStyle.width" @input="changeType(3)"
                                    placeholder="线体宽度"></el-input>
                                <!-- <el-input class="inpu_z" v-model="domain.smooth" @input="changeType(3)" type="number"
                                    :min="0" :max="1" :step="0.1" placeholder="平滑程度(0~1)"></el-input> -->
                                <el-select v-model="domain.smooth" @change="changeType(3)" placeholder="直线曲线"
                                    class="inpu_z">
                                    <el-option v-for=" item in fold_line.line_shape" :key='item.value'
                                        :value="item.value" :label="item.name">
                                    </el-option>
                                </el-select>
                                <!-- <el-input-number class="inpu_z" controls-position="right" size="small"
                                    v-model="domain.smooth" @change="changeType(3)" :min="0" :max="1" :step="0.1"
                                    label="平滑程度"></el-input-number> -->
                                <el-select v-model="domain.symbol" @change="changeType(3)" placeholder="请选择符号样式"
                                    class="inpu_z">
                                    <el-option v-for=" item in fold_line.symbol" :key='item.value' :value="item.value"
                                        :label="item.name">
                                    </el-option>
                                </el-select>
                                <el-select v-model="domain.step" @change="changeType(3)" placeholder="请选择线体样式"
                                    class="inpu_z">
                                    <el-option v-for=" item in fold_line.line_style" :key='item.value'
                                        :value="item.value" :label="item.name">
                                    </el-option>
                                </el-select>
                                <el-select v-model="domain.lineStyle.type" @change="changeType(3)" placeholder="请选择线体形式"
                                    class="inpu_z">
                                    <el-option v-for=" item in fold_line.line_format" :key='item.value'
                                        :value="item.value" :label="item.name">
                                    </el-option>
                                </el-select>
                                <el-button @click.prevent="removeFoldlineData(domain)" type="danger" size="mini" plain
                                    v-if="module.fold_line.style_group.length > 1">删除</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                    <!-- 3.2.动态数据 选择数据来源 -->
                    <el-form :model="module" block style="text-align: left;" v-if="module.fold_line.data_type == 2">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.data_source.group_id" @change="changeDataConfig(config = 3)"
                                placeholder="请选择数据来源" class="inpu" style="width: 4.2rem !important;">
                                <el-option v-for="item in module.data_config" :key='item.id' :value="item.id"
                                    :label="item.data_source_name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-else-if="module.type == 4">
            <el-tabs v-model="config4_1" @tab-click="handleClick4_1" stretch class="tabs">
                <!-- 静态数据 -->
                <el-tab-pane label="静态数据" name="first">
                    <el-form :model="module" block style="text-align: left;">
                        <el-form-item label="第一个名:" autofocus class="input0">
                            <el-input v-model="module.statis_data.data[0].name" class="inpu"
                                @input="changeType(4)"></el-input>
                        </el-form-item>
                        <el-form-item label="第一个值:" autofocus class="input0">
                            <el-input v-model="module.statis_data.data[0].value" class="inpu1"
                                @input="changeType(4)"></el-input>
                            <el-color-picker size="mini" style="height: 40px;"
                                v-model="module.statis_data.title_color[0]" @change="changeType(4)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                        <el-form-item label="第二个名:" autofocus class="input0">
                            <el-input v-model="module.statis_data.data[1].name" class="inpu"
                                @input="changeType(4)"></el-input>
                        </el-form-item>
                        <el-form-item label="第二个值:" autofocus class="input0">
                            <el-input v-model="module.statis_data.data[1].value" class="inpu1"
                                @input="changeType(4)"></el-input>
                            <el-color-picker size="mini" style="height: 40px;"
                                v-model="module.statis_data.title_color[1]" @change="changeType(4)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                        <el-form-item label="第三个名:" autofocus class="input0">
                            <el-input v-model="module.statis_data.data[2].name" class="inpu"
                                @input="changeType(4)"></el-input>
                        </el-form-item>
                        <el-form-item label="第三个值:" autofocus class="input0">
                            <el-input v-model="module.statis_data.data[2].value" class="inpu1"
                                @input="changeType(4)"></el-input>
                            <el-color-picker size="mini" style="height: 40px;"
                                v-model="module.statis_data.title_color[2]" @change="changeType(4)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                        <el-form-item label="第四个名:" autofocus class="input0">
                            <el-input v-model="module.statis_data.data[3].name" class="inpu"
                                @input="changeType(4)"></el-input>
                        </el-form-item>
                        <el-form-item label="第四个值:" autofocus class="input0">
                            <el-input v-model="module.statis_data.data[3].value" class="inpu1"
                                @input="changeType(4)"></el-input>
                            <el-color-picker size="mini" style="height: 40px;"
                                v-model="module.statis_data.title_color[3]" @change="changeType(4)" show-alpha>
                            </el-color-picker>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <!-- 动态数据 -->
                <el-tab-pane label="动态数据" name="second">
                    <!-- 4.统计图 的数据内容 -->
                    <el-form :model="module" block style="text-align: left;">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.data_source.group_id" @change="changeDataConfig(config = 4)"
                                placeholder="请选择数据来源" class="inpu" style="width: 4.2rem !important;">
                                <el-option v-for=" item in module.data_config " :key='item.id' :value="item.id"
                                    :label="item.data_source_name">
                                </el-option>
                            </el-select>
                            <!-- {{ module.data_source.group_id - 1 }} -->
                            <!-- {{ module.data_config[module.data_source.group_id - 1].response_dictionary }} -->
                            <!-- <el-input v-model="module.pie.title" class="inpu" @input="changeType(1)"></el-input> -->
                        </el-form-item>
                        <div style="display: flex; height: 1rem; border: 1px solid red;"
                            v-for=" item in this.module.back_dictionary  ">
                            <div
                                style="width: 35%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap; ">
                                {{ item.key }}</div>
                            <div
                                style="width: 35%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;   text-overflow: ellipsis;  white-space: nowrap;  ">
                                {{ item.name }}</div>
                            <div
                                style="width: 30%;height: 100%; font-size:.38rem; display: flex;align-items: center;overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  ">
                                {{ item.value }} </div>
                        </div>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 天气 -->
        <div v-else-if="module.type == 5">
            <el-form :model="module" block style="text-align: left;">
                <!-- (1) 天气的样式 -->
                <el-form-item label="天气样式:" autofocus class="input0">
                    <el-select v-model="module.weatherType" @change="changeType(5)" placeholder="请选择样式" class="inpu"
                        style="width: 4.2rem !important;">
                        <el-option v-for=" item in weather.weatherType " :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 改变样式后  多天的还可以同时改变 显示天数 -->
                <el-form-item v-if="module.weatherType == 2" label="展示天数:" autofocus class="input0">
                    <el-input-number controls-position="right" size="small" v-model="module.weatherNumDay"
                        @change="changeType(5)" :min="1" :max="7" :step="1" label="展示天数"></el-input-number>
                </el-form-item>
                <!-- (2) 背景的颜色 -->
                <!-- <el-form-item label="天气背景:" autofocus class="input0">
                    <el-color-picker v-model="module.weatherBackColor" @change="changeType(5, 1)">
                    </el-color-picker>
                </el-form-item> -->
                <el-form-item label="字体颜色:" autofocus class="input0">
                    <el-color-picker v-model="module.weatherColor" @change="changeType(5, 2)">
                    </el-color-picker>
                </el-form-item>
                <el-form-item label="字体大小:" autofocus class="input0">
                    <el-input v-model="module.weatherSize" type="number" class="inpu1" @input="changeType(5)">
                    </el-input>
                </el-form-item>
                <el-form-item label="图标样式:" autofocus class="input0">
                    <el-select v-model="module.weatherIcon" @change="changeType(5)" placeholder="请选择样式" class="inpu1">
                        <el-option v-for=" item in weather.weatherIcon " :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div v-else-if="module.type == 6">
            <el-tabs v-model="config6_1" @tab-click="handleClick6_1" stretch class="tabs">
                <el-tab-pane label="属性配置" name="first">
                    <!-- 1.样式属性 -->
                    <el-form :model="module" block style="text-align: left;">
                        <!-- (1)表格的样式配置 -->
                        <el-form-item label="表头高度:" autofocus class="input0">
                            <el-input v-model="module.from_data.headerHeight" type="number" class="inpu"
                                @input="changeType(6)"></el-input>
                        </el-form-item>
                        <el-form-item label="显示行数:" autofocus class="input0">
                            <el-input v-model="module.from_data.rowNum" type="number" class="inpu"
                                @input="changeType(6)"></el-input>
                        </el-form-item>
                        <el-form-item label="滚动方式:" autofocus class="input0">
                            <el-select v-model="module.from_data.carousel" @change="changeType(6)" placeholder="请选择样式"
                                class="inpu" style="width: 4.2rem !important;">
                                <el-option v-for=" item in turn_type " :key='item.value' :value="item.value"
                                    :label="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="表头背景:" autofocus class="input0" inline>
                            <el-color-picker size="mini" style="height: 40px;" v-model="module.from_data.headerBGC"
                                @change="changeType(6)" show-alpha>
                            </el-color-picker>

                            <span style="margin: 0 .3rem;color: #606266;">表头颜色:</span>
                            <el-color-picker size="mini" style="height: 40px;" v-model="module.from_data.color"
                                @change="changeType(6)" show-alpha>
                            </el-color-picker><br>
                            表头字体的颜色大小{{ editableTabsValue }}
                        </el-form-item>
                        <el-form-item label="表头大小:" autofocus class="input0">
                            <el-input v-model="module.from_data.header_size" class="inpu1" type="number"
                                @input="changeHeaderSize"></el-input>
                        </el-form-item>

                        <el-form-item label="轮播间隔:" autofocus class="input0">
                            <el-input v-model="module.from_data.waitTime" class="inpu1"
                                @input="changeType(6)"></el-input>ms
                        </el-form-item>
                    </el-form>
                    <!-- 属性配置下面的 行配置    列配置  -->
                    <el-tabs v-model="config6_2" style="width:100%;" @tab-click="handleClick6_2" stretch class="tabs">
                        <!-- 6-1 行的配置 -->
                        <el-tab-pane label="行配置" name="first">
                            <el-form :model="module" block style="text-align: left;">
                                <!-- <el-form-item label="行的高度:" autofocus class="input0">
                                    <el-input v-model="module.from_data.rowHeight" type="number" class="inpu"
                                        @input="changeType(6)"></el-input>
                                </el-form-item> -->
                                <el-form-item label="奇数行的颜色:" autofocus class="input0">
                                    <el-color-picker size="mini" style="height: 40px;"
                                        v-model="module.from_data.oddRowBGC" @change="changeType(6)" show-alpha>
                                    </el-color-picker>
                                </el-form-item>
                                <el-form-item label="偶数行的颜色:" autofocus class="input0">
                                    <el-color-picker size="mini" style="height: 40px;"
                                        v-model="module.from_data.evenRowBGC" @change="changeType(6)" show-alpha>
                                    </el-color-picker>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <!-- 6-2 列的配置 -->
                        <el-tab-pane label="列配置" name="second">
                            <!-- {{ module.from_data.rabs_data }} -->
                            <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab4"
                                class="tabs_from">
                                <el-tab-pane v-for="( item, index ) in module.from_data.rabs_data " :key="item.index"
                                    :label="item.title" :name="item.name">
                                    <el-form :model="item" block style="text-align: left;">
                                        <el-form-item label="列标题:" autofocus class="input0">
                                            <el-input v-model="item.title" class="inpu" @input="changeFromData(6)">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="列宽度:" autofocus class="input0">
                                            <el-input v-model="item.content" type="number" class="inpu"
                                                @input="changeFromData(6)">
                                            </el-input>
                                        </el-form-item>
                                    </el-form>
                                </el-tab-pane>
                            </el-tabs>

                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="数据配置" name="second">
                    <!-- 6. 表格的数据内容 -->
                    <el-form :model="module" block style="text-align: left;">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.from_data.data_type" class="inpu" @change="changeDataType()"
                                placeholder="请选择数据来源">
                                <el-option v-for="item in dataType" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <!-- 6.1.静态资源 , 自己编写数据 -->
                    <el-form style="text-align: left;margin-top:0.2rem;line-height:0.25rem;height:100%;"
                        v-if="module.from_data.data_type == 1">
                        <el-form-item style="width:100%;">
                            <h3 class="dialTitle" style="display:inline-block;margin-right:0.2rem;">
                                表格数据
                            </h3>
                            <el-button @click="addFromData()" type="primary" plain size="mini">添加行(数据)</el-button>
                            <el-button @click="addFromHeader()" type="primary" plain size="mini">添加列</el-button>
                            <!-- <div class="sensorHead">
                                <span class="inpu_b" v-for="item in module.from_data.header">
                                    {{ item }}</span>
                            </div> -->
                        </el-form-item>
                        <div class="cycleBox1">
                            <div class="sensorHead">
                                <span class="inpu_b" v-for="(item, index) in module.from_data.header_use" :key="index">
                                    {{ item }}
                                </span>
                            </div>
                            <el-form-item v-for="(domain, index) in module.from_data.data" class="oneDomain"
                                style="width:100%;" :key="index + 't'">
                                <!-- v-for="(item, i) in domain" -->
                                <el-input class="inpu_z" v-for="(item, i) in domain" :key="i" v-model="domain[i]"
                                    @input="changeType(6)" placeholder="输入名称"></el-input>
                                <el-button @click.prevent="removeFromData(domain)" type="danger" size="mini" plain
                                    v-if="module.from_data.data.length > 1">删除</el-button>
                            </el-form-item>
                            <!-- 下方的删除列 -->
                            <div class="sensorHead sensorHead1">
                                <el-button class="inpu_b" v-for="(item, i) in module.from_data.header_use" :key="i"
                                    @click.prevent="removeFromColumn(item, i)" type="danger" plain size="mini"
                                    v-if="module.from_data.header_use.length > 1">
                                    删除列</el-button>
                            </div>
                        </div>
                    </el-form>
                    <!-- 6.2.表格图 动态数据 选择数据来源 -->
                    <el-form :model="module" block style="text-align: left;" v-if="module.from_data.data_type == 2">
                        <el-form-item label="数据来源:" autofocus class="input0">
                            <el-select v-model="module.data_source.group_id" @change="changeDataConfig(config = 6)"
                                placeholder="请选择数据来源" class="inpu" style="width: 4.2rem !important;">
                                <el-option v-for=" item in module.data_config " :key='item.id' :value="item.id"
                                    :label="item.data_source_name">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div v-else-if="module.type == 7">
            <el-form :model="module" block style="text-align: left;">
                <el-form-item label="视频类型:" autofocus class="input0">
                    <el-select v-model="module.videoType" @change="changeType(7)" placeholder="请选择类别" class="inpu"
                        style="width: 4.2rem !important;">
                        <el-option v-for=" item in videoType " :key='item.value' :value="item.value" :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="视频地址:" v-if="module.videoType == 1" autofocus class="input0">
                    <el-input v-model="module.videoURL" type="textarea" class="inpu" @input="changeType(7)"></el-input>
                </el-form-item>

                <el-form-item label="选视频组:" v-if="module.videoType == 2" autofocus class="input0">
                    <el-select v-model="module.videoGroup" @change="changeVideoGroup()" placeholder="请选择视频组"
                        class="inpu" style="width: 4.2rem !important;">
                        <el-option v-for=" item in videoGroup " :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="轮训时间:" v-if="module.videoType == 2" autofocus class="input0">
                    <el-input v-model="module.videoTurnTime" type="number" class="inpu"
                        @input="changeType(7)"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div v-else-if="module.type == 8">
            <!-- 图例颜色<br> <el-color-picker v-model="module.bgcolor" @change="changeType(8)" show-alpha>
            </el-color-picker><br> -->

            <!-- 1.地图的样式属性 -->
            <el-form :model="module" block style="text-align: left;">
                <el-form-item label="地图样式:" autofocus class="input0">
                    <el-select v-model="module.mapStyle" @change="changeType(8)" placeholder="请选择样式" class="inpu"
                        style="width: 4.2rem !important;">
                        <el-option v-for=" item in map.mapStyle " :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地图视图:" autofocus class="input0">
                    <el-select v-model="module.mapView" @change="changeType(8)" placeholder="请选择视图" class="inpu"
                        style="width: 4.2rem !important;">
                        <el-option v-for=" item in map.mapView " :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示标签:" autofocus class="input0">
                    <el-switch v-model="module.showLabel" @change="changeType(8)" active-color="#13ce66"
                        inactive-color="">
                    </el-switch>
                </el-form-item>
                <el-form-item label="标签位置:" autofocus class="input0" v-if="module.showLabel">
                    <el-select v-model="module.labelPosition" @change="changeType(8)" placeholder="请选择位置" class="inpu"
                        style="width: 4.2rem !important;">
                        <el-option v-for=" item in map.labelPosition " :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图标样式:" autofocus class="input0">
                    <el-select v-model="module.iconStyle" @change="changeType(8)" placeholder="请选择图标样式" class="inpu"
                        style="width: 4.2rem !important;">
                        <el-option v-for="item in map.iconStyle" :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="点击功能:" autofocus class="input0">
                    <el-select v-model="module.clickGo" @change="changeType(8)" placeholder="请选择功能" class="inpu"
                        style="width: 4.2rem !important;">
                        <el-option v-for=" item in map.clickGo " :key='item.value' :value="item.value"
                            :label="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="中心经纬:" autofocus class="input0">
                    <el-input v-model="module.center[0]" class="inpu1" @input="changeType(8)"></el-input>
                    <el-input v-model="module.center[1]" class="inpu1" @input="changeType(8)"></el-input>
                </el-form-item>
                <el-form-item label="画面倍数:" autofocus class="input0">
                    <el-input v-model="module.zoom" class="inpu1" @input="changeType(8)"></el-input>
                </el-form-item>
            </el-form>


        </div>
        <!-- 6.表格 添加列的弹出框 -->
        <el-dialog :visible="dialogAddColumnVisible" :width="win.screen.width >= 1600 ? '16%' : '21%'" append-to-body
            :show-close="close" top="220px">
            <div class="toptit">
                <span>添加列</span>
                <span style="float: right; cursor: pointer" @click="dialogAddColumnVisible = false">关闭</span>
            </div>
            <el-form style="text-align: left;margin-top:0.3rem;" block>
                <el-form-item class="formline_3" label="列名称:">
                    <el-input style="width: 3.5rem" class="inpu" v-model="form_header" placeholder="请输入列名称"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: right; margin-top: 0.3rem">
                <el-button type="primary" size="small" @click="addHeader">添加</el-button>
                <el-button size="small" @click="dialogAddColumnVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        module: {}
    },
    data() {
        return {
            fromLabelWidth1: '76px',
            win: window,
            close: false,
            ws: "",
            // cId: cId
            tabIndex: 2,
            allComponent: [
                { value: 1, name: '饼图' },
                { value: 2, name: '柱图' },
                { value: 3, name: '折线' },
                { value: 4, name: '统计' },
                { value: 5, name: '天气' },
                { value: 6, name: '表格' },
                { value: 7, name: '视频' },
            ],
            // 边框的样式
            border_style: [
                { value: 'div', name: '无边框' },
                { value: 'DvBorderBox1', name: '样式1' },
                { value: 'DvBorderBox2', name: '样式2' },
                { value: 'DvBorderBox3', name: '样式3' },
                { value: 'DvBorderBox4', name: '样式4' },
                { value: 'DvBorderBox5', name: '样式5' },
                { value: 'DvBorderBox6', name: '样式6' },
                { value: 'DvBorderBox7', name: '样式7' },
                { value: 'DvBorderBox8', name: '样式8' },
                { value: 'DvBorderBox9', name: '样式9' },
                { value: 'DvBorderBox10', name: '样式10' },
                { value: 'DvBorderBox12', name: '样式11' },
                { value: 'DvBorderBox13', name: '样式12' },
            ],
            // 数据的格式
            dataType: [{ value: 1, name: '静态数据' }, { value: 2, name: '动态数据' }],
            // 配置的项目
            config1_1: 'first',
            config1_2: 'first',

            config2_1: 'first',
            config3_1: 'first',
            config4_1: 'first',

            config6_1: 'first',
            config6_2: 'first',

            // 饼图的样式
            pie: {
                roseType: [
                    { value: '', name: '经典同比例' },
                    { value: 'area', name: '南丁格尔图' },
                    { value: 'radius', name: '使用比例圆心角' },
                ],
                direction: [
                    { value: 'vertical', name: '竖向' },
                    { value: 'horizontal', name: '横向' }
                ]
            },

            // 配置
            editableTabsValue: null,

            // 折线的配置
            fold_line: {
                line_shape: [
                    { value: true, name: '曲线' },
                    { value: false, name: '直线' },
                    // { value: 1, name: '阶梯' },
                ],
                line_format: [
                    { value: 'solid', name: '实线' },
                    { value: 'dashed', name: '虚线' },
                    { value: 'dotted', name: '点线' },
                ],
                line_style: [
                    { value: '', name: '折线' },
                    // { value: 'middle', name: '折线' },
                    { value: 'start', name: '方波' },
                ],
                symbol: [
                    { value: 'none', name: '不显示符号' },
                    { value: 'circle', name: '圆形符号' },
                    { value: 'rect', name: '方形符号' },
                    { value: 'roundRect', name: '圆角矩形符号' },
                    { value: 'triangle', name: '三角形符号' },
                    { value: 'diamond', name: '菱形符号' },
                    { value: 'pin', name: '锥形符号' },
                    { value: 'arror', name: '箭头符号' },

                ]
            },
            // 第五个  天气的样式选择
            weather: {
                weatherType: [
                    { value: 162, name: '当日1' },
                    { value: 95, name: '当日2' },
                    { value: 2, name: '多日1' },
                    { value: 9, name: '多日2' },
                ],
                backColor: [
                    { value: '', name: '透明' },
                    { value: '000000', name: '黑色' },
                    { value: 'ffffff', name: '白色' },
                    { value: 'C6C6C6', name: '灰色' },
                    { value: '', name: '深红' },
                    { value: '', name: '红' },
                    { value: '', name: '橙' },
                    { value: '', name: '黄' },
                    { value: '00B050', name: '绿' },
                    { value: '00B0F0', name: '浅蓝' },
                    { value: '0070C0', name: '蓝' },
                    { value: '002060', name: '深蓝' },
                ],
                weatherIcon: [
                    { value: 1, name: '样式1' },
                    { value: 2, name: '样式2' },
                    { value: 3, name: '样式3' },
                    { value: 4, name: '样式4' },
                    { value: 5, name: '样式5' },
                ],
            },
            // 第六个 表格
            turn_type: [
                { value: 'single', name: '单行滚动' },
                { value: 'page', name: '整页滚动' },
            ],
            dialogAddColumnVisible: false,
            // 添加的时候的表头输入 临时绑定
            form_header: '',
            // 第七个 视频监控
            videoType: [
                { value: 1, name: '单个视频' },
                { value: 2, name: '组类视频' },
            ],
            videoGroup: [
                { value: 1, name: '测试组合1' },
                { value: 2, name: '测试组合2' },
                { value: 3, name: '测试组合3' },
            ],
            // 第八个  地图
            map: {
                mapStyle: [
                    { value: 'normal', name: '标准' },
                    { value: 'dark', name: '幻影黑' },
                    { value: 'light', name: '月光银' },
                    { value: 'whitesmoke', name: '远山黛' },
                    { value: 'fresh', name: '草色青' },
                    { value: 'grey', name: '雅士灰' },
                    { value: 'graffiti', name: '涂鸦' },
                    { value: 'macaron', name: '马卡龙' },
                    { value: 'blue', name: '靛青蓝' },
                    { value: 'darkblue', name: '极夜蓝' },
                    { value: 'wine', name: '酱籽' },
                ],
                // 视图切换
                mapView: [
                    { value: '3D', name: '3D' },
                    { value: '2D', name: '2D' }
                ],
                labelPosition: [
                    { value: 'left', name: '左侧' },
                    { value: 'right', name: '右侧' },
                    { value: 'top', name: '上侧' },
                    { value: 'bottom', name: '下侧' }
                ],
                iconStyle: [
                    { value: '../../static/local.png', name: '样式一' },
                    { value: '../../static/local2.png', name: '样式二' },
                    { value: '../../static/local3.png', name: '样式三' },
                    { value: '../../static/local4.png', name: '样式四' }
                ],
                clickGo: [
                    { value: 'config', name: '点击后去组态' },
                    { value: 'details', name: '点击后显示详情' },

                ]
            }

        }
    },

    watch: {},
    mounted() {

    },
    created() {
        // console.log('子组件用父级传来的去请求图', this.cId)
        this.changeType(this.module.type)

    },
    methods: {
        // 改变组件的样式
        changeComponent(i) {
            var that = this
            that.module.type = i
            this.$emit('changeType')
            // 默认选择是属性的配置
            this.config1_1 = 'first'
            this.config1_2 = 'first'
            this.config2_1 = 'first'
            this.config2_2 = 'first'
            this.config3_1 = 'first'

            this.config4_1 = 'first'
            this.config6_1 = 'first'
            this.config6_2 = 'first'

            this.module.data_source.group_id = ''
            this.module.back_dictionary = []

        },
        //改变类型
        changeType(i, n) {
            var that = this
            that.module.type = i

            if (i == 6) {
                this.module.from_data.headerHeight = Number(this.module.from_data.headerHeight)
                // this.module.from_data.rabs_data = []
                // this.module.from_data.header_use.forEach((str, index) => {
                //     this.module.from_data.rabs_data.push({
                //         title: `${str}`,
                //         name: `${index + 999}`,
                //         content: 60,                 //  });
                // })
                // 当前数据如果是静态数据 那先要加载列配置时候的数据  
                console.log('测试值', this.module.from_data.rabs_data)
                // 给配置列做数据
                that.getColumnData()


            }
            // 天气前面的颜色的值要取掉井号
            if (i == 5) {
                if (n == 1) {
                    let bgc = this.module.weatherBackColor
                    this.module.weatherBackColor = bgc.substring(1);
                }
                if (n == 2) {
                    let c = this.module.weatherColor
                    this.module.weatherColor = c.substring(1);
                }
            }

            this.$emit('changeType')

            // 默认选择是属性的配置
        },
        // 上传背景图
        editUpload() {
            var that = this;
            var fileLen = document.getElementById("editid").files;
            this.ws = fileLen[0] ? fileLen[0] : "";
            var reads = new FileReader();
            reads.readAsDataURL(this.ws);
            reads.onload = function (e) {
                document.getElementById("old").src = this.result;
                that.module.title_img = this.result;
            };
            that.changeType(0)
        },
        // 编辑标题
        changeTitle(title_data) {
            this.$emit('changeTitle')
        },
        // 切换设置的组件配置
        handleClick1_1(tab, event) {
            // console.log(tab, event);
        },
        // 切换设置中的子tabs
        handleClick1_2(tab, event) {
            // console.log(tab, event);
        },
        // 1. 饼图的配置
        addTab1(targetName) {
            var tabIndex = this.module.pie.data.length
            let newTabName = '模块' + ++tabIndex + '';
            this.module.pie.data.push({
                value: this.module.pie.data[this.module.pie.data.length - 1].value,
                name: newTabName,
                itemStyle: { color: 'rgba(6, 83, 149,1)' }
            });
            this.editableTabsValue = newTabName;
            this.changeType(1)
        },
        removeTab1(targetName) {
            let tabs = this.module.pie.data;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.editableTabsValue = activeName;
            this.module.pie.data = tabs.filter(tab => tab.name !== targetName);
            this.changeType(1)
        },
        changeDataType() {
            this.$forceUpdate();

        },
        addPieData() {
            this.module.pie.data.push({
                value: null,
                name: '',
                itemStyle: { color: 'rgba(84, 111, 198,1)' }
            });
            this.changeType(1)
        },
        removePieData(item) {
            var index = this.module.pie.data.indexOf(item);
            if (index !== -1) {
                this.module.pie.data.splice(index, 1);
            }
            this.changeType(1)
        },
        // 2. 柱图的配置
        addTab2(targetName) {
            // var tabIndexL = this.module.columnar.dataY.length
            // 加的时候  拿到最后一个的name  然后再去加上1    作为唯一
            // let newTabName = this.module.columnar.dataY[tabIndex - 1].title + '1'

            // let newTabName = ++tabIndex;

            let newTabName = '柱体' + ++this.tabIndex + Date.now();

            this.module.columnar.dataY.push({
                name: newTabName,
                // title: '新柱体',//唯一的标识
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                    normal: {
                        barBorderRadius: [6, 6, 0, 0],
                        color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                    }
                },
            });
            this.editableTabsValue = newTabName
            this.changeType(2)
        },
        // 删除柱图的配置
        removeTab2(targetName) {

            console.log('删除柱图', targetName)
            let tabs = this.module.columnar.dataY;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.editableTabsValue = activeName;
            this.module.columnar.dataY = tabs.filter(tab => tab.name !== targetName);
            this.changeType(2)
        },
        addColumnarData() {
            // var tabIndexL = this.module.columnar.dataY.length
            let newTabName = '柱体' + ++this.tabIndex + '';
            this.module.columnar.dataY.push({
                name: newTabName,
                // title: this.module.columnar.dataY[tabIndex - 1].title + '1',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                    normal: {
                        barBorderRadius: [3, 5, 0, 0],
                        color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                    }
                },
            },);
            this.changeType(2)
        },
        removeColumnarData(item) {
            var index = this.module.columnar.dataY.indexOf(item);
            if (index !== -1) {
                this.module.columnar.dataY.splice(index, 1);
            }
            this.changeType(2)
        },
        // 3. 折线图的配置
        addTab3(targetName) {
            var tabIndex = this.module.fold_line.style_group.length
            let newTabName = '线体' + ++tabIndex;
            this.module.fold_line.style_group.push({
                name: newTabName,
                type: 'line',
                smooth: false,
                step: '',
                lineStyle: this.module.fold_line.style_group[this.module.fold_line.style_group.length - 1].lineStyle,
                data: [34, 29, 33, 10, 82, 92, 91],
                symbol: 'none',
            });
            this.editableTabsValue = newTabName
            this.changeType(3)
        },
        // 删除折线的某些项
        removeTab3(targetName) {
            let tabs = this.module.fold_line.style_group;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.editableTabsValue = activeName;
            this.module.fold_line.style_group = tabs.filter(tab => tab.name !== targetName);
            this.changeType(3)

        },
        addFoldlineData() {
            this.module.fold_line.style_group.push(
                {
                    name: '测试nn',
                    type: 'line',
                    // 线体的格式与形式
                    smooth: 0,
                    step: '',
                    lineStyle: {
                        type: 'solid',
                        color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                        width: 2 // 设置线的宽度
                    },
                    line_format: 'solid',
                    series_color: 'rgba(194, 53, 43, 0.8)',
                    data: [80, 92, 90, 934, 90, 1330, 1130],
                    symbol: 'rect',
                }
            );
            this.changeType(3)
        },
        removeFoldlineData(item) {
            var index = this.module.fold_line.style_group.indexOf(item);
            if (index !== -1) {
                this.module.fold_line.style_group.splice(index, 1);
            }
            this.changeType(3)
        },
        // 6.表格的动态列配置
        // 表格类型的时候的列配置的数据初始化
        getColumnData() {
            var that = this
            setTimeout(() => {
                that.module.from_data.rabs_data = []
                // computed
                // console.log('走到了 配置列', that.module.from_data.header_use)
                that.module.from_data.header_use.forEach((str, index) => {
                    that.module.from_data.rabs_data.push({
                        title: `${str}`,
                        name: `${index + 3}`,
                        content: `${that.module.from_data.columnWidth[index]}`,
                    });
                })
            }, 200)

        },
        // 改变表格列配置下的属性后  处理数据 改变表格的显示
        changeFromData(i) {
            var that = this
            // console.log('zzzz.zz', that.module.from_data.rabs_data)
            that.module.from_data.header = that.module.from_data.rabs_data.map(obj => obj['title']);
            that.module.from_data.columnWidth = that.module.from_data.rabs_data.map(obj => obj['content']);
            // that.changeType(6)
            that.module.type = i
            this.$emit('changeType')

        },
        //  删除表格列配置下面的其中选项
        removeTab4(targetName) {
            let tabs = this.module.from_data.rabs_data;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        console.log('tttttt', tab)
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                    console.log('删除的时候  表格列的角标', index)
                });
            }
            this.editableTabsValue = activeName;
            this.module.from_data.rabs_data = tabs.filter(tab => tab.name !== targetName);
            this.changeType(6)
            console.log('删除表格', targetName)

            // let tabs = this.module.columnar.dataY;
            // let activeName = this.editableTabsValue;
            // if (activeName === targetName) {
            //     tabs.forEach((tab, index) => {
            //         if (tab.name === targetName) {
            //             let nextTab = tabs[index + 1] || tabs[index - 1];
            //             if (nextTab) {
            //                 activeName = nextTab.name;
            //             }
            //         }
            //     });
            // }
            // this.editableTabsValue = activeName;
            // this.module.columnar.dataY = tabs.filter(tab => tab.name !== targetName);
            // this.changeType(2)
        },
        addFromData() {
            let le = this.module.from_data.data[0].length
            this.module.from_data.data.push(Array.from({ length: le }, () => ''));
            this.changeType(6)
        },
        // 添加表格的列
        addFromHeader() {
            this.dialogAddColumnVisible = true
            this.form_header = ''
        },
        // 确定添加列
        addHeader() {
            this.dialogAddColumnVisible = false
            this.module.from_data.header_use.push(this.form_header)
            this.module.from_data.data.forEach(row => row.push(''));

            // 把之前的样式添加进去,  添加到header
            this.changeHeaderSize()

            // this.module.from_data.rabs_data = []
            // this.module.from_data.header_use.forEach((str, index) => {
            this.module.from_data.rabs_data.push({
                title: `${this.form_header}`,
                name: `${this.form_header + 3}`,
                content: 60,
                // });
            })
            this.form_header = ''
        },
        // 删除行
        removeFromData(item) {
            var index = this.module.from_data.data.indexOf(item);
            if (index !== -1) {
                this.module.from_data.data.splice(index, 1);
            }
            this.changeType(6)
        },
        // 删除列
        removeFromColumn(item, i) {
            if (i !== -1) {
                this.module.from_data.header_use.splice(i, 1);
                this.module.from_data.header.splice(i, 1);
                this.module.from_data.rabs_data.splice(i, 1);
            }
            this.module.from_data.data.forEach(row => {
                row.splice(i, 1);
            });
            this.changeType(6)
        },
        // 改变表格的头的大小
        changeHeaderSize() {
            let size = this.module.from_data.header_size
            // console.log('daxiao', size)
            this.module.from_data.header = this.module.from_data.header_use.map(item => `<span style="font-size:${size}px">${item}</span>`);

            this.changeType(6)
        },

        // --------------改变数据的来源
        changeDataConfig(config) {
            var that = this;
            console.log('cccccccccc', this.module.data_config[this.module.data_source.group_id - 1])
            var zujian = this.module.data_config[this.module.data_source.group_id - 1].response_dictionary
            // 拿数据
            var method = this.module.data_config[this.module.data_source.group_id - 1].request_method
            var url = this.module.data_config[this.module.data_source.group_id - 1].request_url
            var params_ask = this.module.data_config[this.module.data_source.group_id - 1].params_dictionary


            if (config == 1) {
                // 如果是饼图的时候去  改变数据的来源
                this.$http({
                    method: method,
                    url: url,
                    data: {}
                }).then(res => {
                    if (res && res.data.result == "success") {
                        console.log('饼图数据来源', res.data.data)
                        zujian.forEach(item => {
                            item.value = res.data.data[item.key]
                        })
                        var color_group = [{ color: 'rgba(84, 111, 198,1)' },
                        { color: 'rgba(145, 205, 118,1)' }, { color: 'rgba(250, 201, 88,1)' },
                        { color: 'rgba(239, 102, 103,1)' }, { color: 'rgba(115, 192, 223,1)' },
                        { color: 'rgba( 237, 179, 176,1)' }, { color: 'rgba( 251, 234, 234,1)' },
                        { color: 'rgba( 48, 250, 65,1)' }, { color: 'rgba(  133, 87, 24,1)' },
                        // 重复
                        { color: 'rgba(84, 111, 198,1)' },
                        { color: 'rgba(145, 205, 118,1)' }, { color: 'rgba(250, 201, 88,1)' },
                        { color: 'rgba(239, 102, 103,1)' }, { color: 'rgba(115, 192, 223,1)' },
                        { color: 'rgba( 237, 179, 176,1)' }, { color: 'rgba( 251, 234, 234,1)' },
                        { color: 'rgba( 48, 250, 65,1)' }, { color: 'rgba(  133, 87, 24,1)' },
                        ]
                        that.module.back_dictionary = zujian.map((item, index) => {
                            return {
                                name: item.label,
                                key: item.key,
                                value: item.value,
                                enum: item.enum,
                                itemStyle: color_group[index]
                            };
                        })
                        // console.log('组合数据完成', that.module.back_dictionary)
                        that.module.pie.data = that.module.back_dictionary
                        setTimeout(() => {
                            that.changeType(1)
                        }, 200);
                    }
                }).catch(error => {
                    console.log(error);
                });


            } else if (config == 2) {
                this.$http({
                    method: method,
                    url: url,
                    data: {}
                }).then(res => {
                    if (res && res.data.result == "success") {
                        console.log('柱图数据来源', res.data.data)
                    }
                }).catch(error => {
                    console.log(error);
                });


                // 改变柱图的配置


            } else if (config == 3) {
                // 改变折线的数据来源
                this.$http({
                    method: method,
                    url: url,
                    data: {}
                }).then(res => {
                    if (res && res.data.result == "success") {
                        console.log('折线图数据来源', res.data.data)
                        that.module.fold_line.dataX = zujian.map(item => item.label);
                        that.module.fold_line.dataY = Object.values(res.data.data);
                        setTimeout(() => {
                            that.changeType(3)
                        }, 200);
                    }
                }).catch(error => {
                    console.log(error);
                });

            } else if (config == 4) {
                // 改变统计的数据来源
                this.$http({
                    method: method,
                    url: url,
                    data: {}
                }).then(res => {
                    if (res && res.data.result == "success") {
                        zujian.forEach(item => {
                            item.value = res.data.data[item.key]
                        })
                        that.module.back_dictionary = zujian.map((item, index) => {
                            return {
                                name: item.label,
                                value: item.value,
                            };
                        })
                        // console.log('组合数据完成', that.module.back_dictionary)
                        that.module.statis_data.data = that.module.back_dictionary

                        that.changeType(4)
                    }
                }).catch(error => {
                    console.log(error);
                });
            } else if (config == 6) {
                // 改变表格的数据来源
                this.$http({
                    method: method,
                    url: url,
                    data: {}
                }).then(res => {
                    if (res && res.data.result == "success") {
                        var that = this
                        console.log('表格数据来源', res.data.data)

                        // console.log('表格的组件', zujian)

                        // 头部的label要正常显示     还要把对应的key存起来  后面拿对应的value
                        that.module.from_data.header_use = zujian.map(obj => obj.label);
                        that.module.from_data.head_key = zujian.map(obj => obj.key);
                        // [zujian.map(obj => obj.label), zujian.map(obj => obj.key)] =
                        //     [that.module.from_data.header_use, that.module.from_data.head_key];

                        this.changeHeaderSize()

                        // 用key再去吧所有数据中需要的键名值拿出来处理
                        // 报错map
                        console.log('报错的list', res.data.data)

                        // that.module.back_dictionary = res.data.data.map(obj => that.module.from_data.head_key.map(key => obj[key]));
                        that.module.back_dictionary = [res.data.data].map(obj => {
                            return that.module.from_data.head_key.map(key => obj[key]);
                        });
                        console.log('拿到的后面要用的值............', that.module.back_dictionary)
                        that.module.from_data.data = that.module.back_dictionary
                        // 凑左边配置列的数据  
                        that.module.from_data.rabs_data = []
                        that.module.from_data.header_use.forEach((str, index) => {
                            that.module.from_data.rabs_data.push({
                                title: `${str}`,
                                name: `${index + 3}`,
                                content: `${that.module.from_data.columnWidth[index]}`,

                            });
                        })
                        setTimeout(() => {
                            that.changeType(6)
                        }, 200);
                    }
                }).catch(error => {
                    // 这里报错了map
                    console.log(error);
                });
            }
            // this.getAssemblyConfig(method, url)
        },

        // 查询当前组件的配置数据  然后赋值在数据选项里面
        getAssemblyConfig(method, url) {
            var that = this;
            this.$http({
                method: method,
                url: url,
                data: {}
            }).then(res => {
                if (res && res.data.result == "success") {
                    // console.log('当前组件样式下面的信息', res);

                    that.module.back_dictionary.forEach(item => {
                        item.value = res.data.data[item.key]
                    })
                    this.$set(this.data, 'that.module.back_dictionary', that.module.back_dictionary);
                    console.log('组合数据完成', that.module.back_dictionary)
                }
            }).catch(error => {
                console.log(error);
            });
        },
        //2. 柱图的组件配置
        handleClick2_1(tab, event) {
            // console.log(tab, event);
        },

        // 3. 折线的组件配置
        handleClick3_1(tab, event) {
            // console.log(tab, event);
        },

        // 4. 统计的组件配置
        handleClick4_1(tab, event) {
            // console.log(tab, event);
        },

        // 6. 表格的组件配置
        handleClick6_1(tab, event) {
            console.log(tab, event);
            this.config6_2 = 'first'
        },
        handleClick6_2(tab, event) {
            console.log(tab, event, this.config6_2);
            // this.$forceUpdate();
            if (this.config6_2 == 'second') {
                // this.module.from_data.rabs_data = []
                // this.module.from_data.header_use.forEach((str, index) => {
                //     this.module.from_data.rabs_data.push({
                //         title: `${str}`,
                //         name: `${index + 999}`,
                //         content: 60,
                //     });
                // })

            }
        },
        // 7.视频  视频可选的组  在选择之后的处理
        changeVideoGroup() {
            // 拿到当前组的视频信息    然后



            this.changeType(7)
        }

    }

}
</script>
<style scoped>
.select_current_type {
    background-color: #5bbd92 !important;
    color: black !important;
}

.button_group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.button_group /deep/ .el-button {
    margin: 0px !important;
    width: 26% !important;
    margin-bottom: .2rem !important;
}

.thumb {
    width: 3.4rem;
    height: 1rem;
    /* border: 1px solid red */
}

#editid {
    width: 2.8rem;
    height: 1.8rem;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 12;
    opacity: 0;
    /* border: 1px solid red; */
}

.input0 {
    margin-bottom: 5px !important;

    /* border: 1px solid red; */
}

.inpu {
    /* vertical-align: middle; */
    width: 4.2rem;
    font-size: 0.45rem;
    margin-right: 0.3rem;
}

.inpu1 {
    /* vertical-align: middle; */
    width: 1.98rem;
    font-size: 0.3rem;
    margin-right: 0.16rem;
}

.inpu1 /deep/ .el-input-group__append {
    padding: 0 3px !important;
}

.inpu1 /deep/ .el-input__inner {
    padding: 0 8px !important;
}


/* tabs样式的切换 */
.tabs /deep/ .el-tabs__active-bar {
    background-color: #581087 !important;
}

.tabs /deep/ .el-tabs__item.is-active {
    color: #581087 !important;
    font-weight: 700 !important;
}

/* 环形配置 tabs*/
.cycle_graph /deep/ .el-tabs__item {
    padding: 0 7px !important;
}

/* 表格的tabs */
.tabs_from /deep/ .el-tabs__item {
    padding: 0 7px !important;
}

/* 静态  配置数据 + 数据项 */
.sensorHead {
    height: 0.7rem;
    line-height: 0.6rem;
    /* border: 1px solid red; */
    width: 100%;
    border-bottom: 1px solid #111;
    margin: 0rem 0 0.1rem 0;


}

.sensorHead1 {

    border-bottom: 0 !important;
}

.cycleBox1 {
    width: auto;
    white-space: nowrap;
    overflow: auto;
}

.inpu_b {
    display: inline-block;
    width: 24%;
    text-align: center;
    margin-left: 0;
    margin-right: 0.1rem;
    border: 0 !important;
    font-size: 0.32rem;
    white-space: nowrap;
    overflow: hidden;
    /* 隐藏溢出部分 */
    text-overflow: ellipsis;
}

.oneDomain {
    display: block;
    height: 0.6rem;
    line-height: 0.6rem;
    width: 90%;
    /* border: 1px solid green; */
    white-space: nowrap;
    padding: 0;
    text-align: left;

}

.oneDomain>>>.el-input__inner {
    padding-left: 3px;
    padding-right: 0 !important;
    text-align: center;
}

.inpu_z {
    width: 24%;
    margin-right: 0.1rem;
    text-align: center !important;
    vertical-align: middle;
    /* border: 1px solid #fff; */
    padding: 0;
}

.inpu_z>>>.el-input__inner {
    width: 100%;
}

.tip {
    display: inline-block;
    color: #171313;
    font-size: 0.34rem;
    line-height: 0.35rem;
    transform: translateY(-0.1rem);
}
</style>